<template>
  <div class="mod-config">

    <!-- 店铺详情 -->
    <el-dialog title="店铺信息" :visible.sync="dianPuInfoVisible" :modal-append-to-body="false" >
      <div class="mod-config">
        <el-descriptions :column="2" title="基本信息" :colon="false" border content-class-name="customContent" label-class-name="customLable">
          <el-descriptions-item label="店铺名称">{{ this.dianPuInfoList.dianPuMingCheng }}</el-descriptions-item>
          <el-descriptions-item label="公司名称">{{ this.dianPuInfoList.gongSiMingCheng }}</el-descriptions-item>
          <el-descriptions-item label="地区">{{ this.dianPuInfoList.diQu }}</el-descriptions-item>
          <el-descriptions-item label="是否认证">{{ this.dianPuInfoList.shiFouRenZheng }}</el-descriptions-item>
          <el-descriptions-item label="注册时间">{{ this.dianPuInfoList.zhuCeShiJian }}</el-descriptions-item>
          <el-descriptions-item label="小店介绍">{{ this.dianPuInfoList.xiaoDianJieShao }}</el-descriptions-item>
          <el-descriptions-item label="主营品种">{{ this.dianPuInfoList.zhuYingPinZhong }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ this.dianPuInfoList.lianXiRen }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ this.dianPuInfoList.lianXiFangShi }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ this.dianPuInfoList.xingBie }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ this.dianPuInfoList.shenFenZhengHao }}</el-descriptions-item>
          <el-descriptions-item label="类型">{{ this.dianPuInfoList.leiXing }}</el-descriptions-item>
          <el-descriptions-item label="公司资质" >
            <img width="200px" height="200px" v-if="dianPuInfoList.gongSiZiZhi" :src="this.$http.adornUrl('/api-file/file/view/file?fileId='+ this.dianPuInfoList.gongSiZiZhi) ">
          </el-descriptions-item>
          <el-descriptions-item label="营业执照" >
            <img width="200px" height="200px" v-if="dianPuInfoList.yingYeZhiZhao" :src="this.$http.adornUrl('/api-file/file/view/file?fileId='+ this.dianPuInfoList.yingYeZhiZhao) ">
          </el-descriptions-item>
          <el-descriptions-item label="检测证书" >
            <img width="200px" height="200px" v-if="dianPuInfoList.jianCeZhengShu" :src="this.$http.adornUrl('/api-file/file/view/file?fileId='+ this.dianPuInfoList.jianCeZhengShu) ">
          </el-descriptions-item>
          <el-descriptions-item label="公司照片" >
            <img width="200px" height="200px" v-if="dianPuInfoList.gongSiZhaoPian" :src="this.$http.adornUrl('/api-file/file/view/file?fileId='+ this.dianPuInfoList.gongSiZhaoPian) ">
          </el-descriptions-item>
          <el-descriptions-item label="经营地址">{{ this.dianPuInfoList.jingYingDiZhi }}</el-descriptions-item>

        </el-descriptions>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="qxinfo()">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

export default {
  data() {
    return {
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,

      dianPuInfoList: [],
      dianPuInfoLoading: false,
      dianPuInfoVisible: false,
    }
  },

  activated() {

    // this.getDataList()
  },
  methods: {
    // 新增 / 修改
    init(yonghuId) {
      console.log("dddddd")
      console.log(yonghuId)
      this.dianPuInfoVisible = true;
      this.dianPuInfoList = [];

      this.$http({
        url: this.$http.adornUrl(`/api-trading/keHuGuanLi/keHuGuanLiKeHuMingXi/getByGuanLianYongHu`),
        method: 'get',
        params: this.$http.adornParams({"guanLianYongHu":yonghuId})
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dianPuInfoList=data.data;
        }
      })
    },
    getDataList(pageIndex) {

      if (pageIndex) {
        this.pageIndex = pageIndex
      }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/api-trading/keHuGuanLi/keHuGuanLiKeHuMingXi/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'dianPuMingCheng': this.dataForm.dianPuMingCheng,
          'gongSiMingCheng': this.dataForm.gongSiMingCheng,
          'diQu': this.dataForm.diQu,
          'shiFouRenZheng': this.dataForm.shiFouRenZheng,
          'zhuCeShiJian': this.dataForm.zhuCeShiJian,
          'xiaoDianJieShao': this.dataForm.xiaoDianJieShao,
          'zhuYingPinZhong': this.dataForm.zhuYingPinZhong,
          'lianXiRen': this.dataForm.lianXiRen,
          'lianXiFangShi': this.dataForm.lianXiFangShi,
          'xingBie': this.dataForm.xingBie,
          'shenFenZhengHao': this.dataForm.shenFenZhengHao,
          'leiXing': this.dataForm.leiXing,
          'gongSiZiZhi': this.dataForm.gongSiZiZhi,
          'yingYeZhiZhao': this.dataForm.yingYeZhiZhao,
          'jianCeZhengShu': this.dataForm.jianCeZhengShu,
          'gongSiZhaoPian': this.dataForm.gongSiZhaoPian,
          'jingYingDiZhi': this.dataForm.jingYingDiZhi,
          'guanLianYongHu': this.dataForm.guanLianYongHu,
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.data.records
          this.totalPage = Number(data.data.total)
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    qx() {
      this.addOrUpdateVisible = false;

    },

    qxinfo() {
      this.dianPuInfoVisible = false;

    },

  }
}
</script>
<style>
.custom-title {
  color: #303133;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 20px;
}
.customContent{
  color: rgb(19 35 29)
}
.customLable{
  color: rgb(19 35 29 / 77%);text-align:right;width:120px;background-color:#10592a0d;font-weight:bold
}

</style>
